<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts';
// echarts图表的容器
let dataManageDiagram = ref<HTMLElement>();

onMounted(()=>{
    BindMyChart()
})

const BindMyChart = ()=>{
    // 初始化echarts
    var myChart = echarts.init(dataManageDiagram.value);
    myChart.setOption(option)
}
const option = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['数据修改', '数据下载'],
    textStyle: {
        color: '#FFFFFF',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '4%',
    top:"14%",
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel:{
        textStyle:{
            color:"#fff"
        }
      },
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel:{
        textStyle:{
            color:"#fff"
        }
      },
    }
  ],
  series: [
    {
      name: '数据修改',
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(20,122,222,1)' },
          { offset: 0.5, color: 'rgba(20,122,222,0.5)' },
          { offset: 1, color: 'rgba(20,122,222,0.1)' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(5,83,225,1)' },
            { offset: 0.7, color: 'rgba(5,83,225,0.2)' },
            { offset: 1, color: 'rgba(20,122,222,0.8)' }
          ])
        }
      },
      barWidth: '30%',
      data: [10, 52, 200, 334, 390, 330, 220]
    },
      {
      name: '数据下载',
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(252,172,67,1)' },
          { offset: 0.5, color: 'rgba(252,172,67,0.7)' },
          { offset: 1, color: 'rgba(252,172,67,0.2)' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(248,96,50,0.8)' },
            { offset: 0.7, color: 'rgba(248,96,50,0.2)' },
            { offset: 1, color: 'rgba(252,172,67,0.8)' }
          ])
        }
      },
      barWidth: '30%',
      data: [10, 52, 200, 334, 390, 330, 220]
    }
  ]
};
</script>
<template>
    <div class="dataConnect">
        <div class="dataConManage">
            <div class="dataConManageTitle">
                数据信息管理统计表
            </div>
            <div class="dataConManageDiagram">
                <div class="dataManageDiagram" ref="dataManageDiagram"></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .dataConnect{
        border-radius: 10px;
        position: absolute;
        right: 10px;
        top: 86px;
        width: 400px;
        height: 300px;
        background-color: rgb(83, 183, 244, 0.61);
    }
    .dataConManage{
        width: 100%;
        height: 100%;
    }
    .dataConManageTitle{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
    }
    .dataConManageDiagram{
        height: calc(100% - 40px);
        width: 100%;
    }
    .dataManageDiagram{
        width: 100%;
        height: 100%;
    }
</style>